<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/26
  Time: 9:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>爱购购物车</title>
    <link rel="stylesheet" href="${ctx}/static/front/css/reset.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/top.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/shoppingCart.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/footer.css"/>
    <link rel="stylesheet"
          href="${ctx}/static/front/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${ctx}/static/js/layui/css/layui.css">
    <script type="text/javascript" src="${ctx}/static/front/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/static/front/js/shoppingCart.js"></script>

</head>
<body>
<!--头部-->
<div class="top" id="top">
    <!--头部bar-->
    <div class="top-bar">
        <div class="w1230 top-main">
            <a href="${ctx}/front/frontUser/goindex" class="toIndex">
                <i class="fa fa-home"></i>
                <span>爱购网首页</span>
            </a>
            <div class="account">
                <span>${frontUser.username}<i class="fa fa-caret-down"></i></span>
                <div class="manage">
                    <ul>
                        <li><a href="${ctx}/front/address/goDeliverAddress">收货地址</a></li>
                        <li><a href="${ctx}/front/cart/goBuyerTrade">购物车</a></li>
                        <li><a href="${ctx}/orders/goBuyerTrade">我的订单</a></li>
                        <li><a href="${ctx}/front/frontUser/frontLogOut">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="w1230">
    <img src="${ctx}/static/front/img/logo.png" width="100" height="40" class="logo"/>
    <span class="cart">购物车</span>
</div>
<!--收货地址-->
<div class="w1230 address">
    <div class="default">
        <div class="default-title">收货地址</div>
        <div class="default-list">
            <span class="add-person">收货人：<span id="addName"></span></span>
            <span class="add-tel" id="addTel"></span>
            <p class="add">收货地址：<span id="add"></span></p>
        </div>
        <div class="down"><i class="fa fa-chevron-up" id="down"></i></div>
    </div>
    <div class="address-list" id="address-list">
        <ul>
            <c:forEach items="${addressList}" var="address">
                <li class="clear-float">
                    <input type="hidden" name="addressId" value="${address.id}">
                    <c:if test="${address.defaultadd==1}">
                        <input type="radio" name="address" class="single" checked="checked"/>
                    </c:if>
                    <c:if test="${address.defaultadd==0}">
                        <input type="radio" name="address" class="single"/>
                    </c:if>
                    <div class="address-des">
                        <span class="add-person">${address.consignee}</span>
                        <span class="add-tel">${address.tel}</span>
                        <p>${address.province}${address.city}${address.district}${address.detailedadd}</p>
                    </div>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>
<!--购物车展示-->
<div class="w1230 shopping">
    <!--标题栏-->
    <div class="shopping-title">
        <ul class="clear-float">
            <li class="chk"><input type="checkbox" class="all-chk"/></li>
            <li class="info">商品信息</li>
            <li class="price">单价（元）</li>
            <li class="num">数量</li>
            <li class="min-price-title">小计（元）</li>
            <li class="operate">操作</li>
        </ul>
    </div>
    <!--详细展示-->
    <div class="shopping-list">

        <c:forEach items="${cartComInfos}" var="cartCom">
            <ul class="clear-float">
                <li class="chk"><input type="checkbox" class="chkbox" value="${cartCom.id}"/></li>
                <li class="info"><a href="#" target="_blank">
                    <img src="${ctx}/user/getImage?name=${cartCom.img}"/>
                    <p>${cartCom.name}</p>
                </a></li>
                <li class="price">${cartCom.price}</li>
                <li class="num">
                    <a href="#" class="minus" data-id="${cartCom.id}">-</a>
                    <input type="text" value="${cartCom.counts}" class="num-val"/>
                    <a href="#" class="add" data-id="${cartCom.id}" stocks="${cartCom.stocks}">+</a>
                </li>
                <li class="min-price"></li>
                <li class="operate"><a href="" data-id="${cartCom.id}">删除</a></li>
            </ul>
        </c:forEach>
    </div>
    <!--合计-->
    <div class="shopping-footer clear-float">
        <div class="shopping-footer-l">
            <input type="checkbox" class="all-chk2 all-chk"/>
            <span>全选（共<span class="all-num"></span>件）</span>
            <span class="line">|</span>
            <a href="#" class="all-del">批量删除</a>
        </div>
        <div class="shopping-footer-r">
            <span>已选商品<span class="choose-num">0</span>件</span>
            <span class="line">|</span>
            <span>合计：<span class="total">￥0.00</span></span>
            <a href="#" class="compute">结算</a>
        </div>
    </div>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script src="${ctx}/static/js/layui/layui.js"></script>
<script>
    layui.config({
        base: '${ctx}/static/js/' //此处路径请自行处理, 可以使用绝对路径
    })

    layui.use('layer', function(){
        var layer = layui.layer;

        //点击－通过ajax在商品购物车表中将数量减一
        $('.minus').on('click',function () {

            var counts = $(this).next().val();
            if(counts==1){
                parent.layer.msg('不能再减少了哟。。。', {icon: 5});
                return false;
            }else{
                $(this).next().val(counts-1);
                var counts = $(this).next().val();
                $.post("${ctx}/front/cart/minusCounts",
                    { "counts" : counts,
                    "comId" : $(this).attr("data-id")},
                function (data) {
                    if(data!=""){
                        parent.layer.msg('减少失败。。。', {icon: 5});
                    }else{
                        $(window).attr("location","${ctx}/front/cart/goBuyerTrade");
                    }
                })
            }
        })

        //点击添加，添加商品
        $(".add").on('click',function () {
            var counts = $(this).prev().val();;
            var stocks = $(this).attr("stocks");
            if(counts==stocks){
                parent.layer.msg('库存不足，不能再添加了。。。', {icon: 5});
                return false;
            }
            $(this).prev().val(parseInt(counts)+1);
            counts = $(this).prev().val();

            //通过ajax添加
            $.post("${ctx}/front/cart/addCounts",
                { "counts" : counts,
                    "comId" : $(this).attr("data-id")},
                function (data) {
                    if(data!=""){
                        parent.layer.msg('添加失败。。。', {icon: 5});
                    }else{
                        $(window).attr("location","${ctx}/front/cart/goBuyerTrade");
                    }
                })
        })
        
        //点击单个删除
        $(".operate>a").on("click",function () {
            $.post("${ctx}/front/cart/deleteCounts",
                { "comId" : $(this).attr("data-id")},
            function (data) {
                if (data==""){
                    parent.layer.msg("删除成功", {icon: 1});
                } else{
                    parent.layer.msg(data, {icon: 5});
                }
            })
        })
        
        //点击批量删除
        $(".all-del").on('click',function () {

            var commodityid = $("input[class='chkbox']");

            var commodityidArr = [];
            for(k in commodityid){
                if(commodityid[k].checked)
                    commodityidArr.push(commodityid[k].value);
            }
            if (commodityidArr.length==0){
                parent.layer.msg("请选择商品", {icon: 5});
                return false;
            }
            layer.confirm('确定要删除这些商品吗？', {icon: 3, title: '提示'}, function (index) {

                $.ajax({
                    type: "POST",
                    url: '${ctx}/front/cart/deleteAll',
                    contentType : "application/json",
                    data: JSON.stringify(commodityidArr),
                    success: function(e){
                        if (e == "") {
                            parent.layer.msg("删除成功", {icon: 1}); //高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
                            $(window).attr("location","${ctx}/front/cart/goBuyerTrade");
                        } else {
                            parent.layer.msg(e, {icon: 5});
                        }
                    },
                    error: function(res){
                        layer.msg("未知异常", {icon: 2});
                    }
                });
            });
        })

        //结算
        $(".compute").on("click",function () {
            var commodityid = $(".chkbox");

            var commodityArr = [];

            for(k in commodityid){

                if(commodityid[k].checked){
                    commodityArr.push(commodityid[k].value);
                }
            }
            if (commodityArr.length==0){
                parent.layer.msg("请选择商品", {icon: 5});
                return false;
            }
            var addressId = $("input[name='addressId']").val();

            commodityArr.push(addressId);

            $.ajax({
                type: "POST",
                url: '${ctx}/front/cart/buyCommodity',
                contentType : "application/json",
                data: JSON.stringify(commodityArr),
                success: function(e){
                    if (e == "") {
                        layer.confirm('结算成功，是否进入您的订单？', {icon: 3, title: '提示'}, function (index) {
                            $(window).attr("location","${ctx}/orders/goBuyerTrade");
                        })
                    } else {
                        parent.layer.msg(e, {icon: 5});
                    }
                },
                error: function(res){
                    layer.msg("未知异常", {icon: 2});
                }
            });

        })

    });

</script>
</body>
</html>
